import React, { Component } from "react";

export default class Item extends Component {
  state = {
    isShow: "none",
    backgroundColor: "white",
  };

  render() {
    return (
      <div
        tabIndex="0" // 设置 tabIndex，使 div 可聚焦
        id="input-box"
        style={{
          border: "1px solid #ccc",
          display: "flex",
          justifyContent: "left",
          width: "300px",
          paddingInlineStart: "10px",
          flexDirection: "row",
          alignItems: "center",
          backgroundColor: this.state.backgroundColor,
        }}
        onMouseEnter={() => {
          this.setState({
            isShow: "block",
            backgroundColor: "gray",
          });
        }}
        onMouseLeave={() => {
          this.setState({
            isShow: "none",
            backgroundColor: "white",
          });
        }}
      >
        <input
          type="checkbox"
          checked={this.props.value}
          onChange={() => this.props.check(this.props.id)}
        ></input>
        <p style={{ paddingLeft: "10px" }}>{this.props.name}</p>
        <button
          id="button"
          style={{
            display: this.state.isShow,
            height: "20px",
            width: "80px",
            borderRadius: "5px",
            backgroundColor: "red",
            color: "white",
            fontSize: "10px",
            marginLeft: "auto",
            marginRight: "10px",
          }}
          onClick={() => this.props.delete(this.props.id)}
        >
          删除
        </button>
      </div>
    );
  }
}
